/*

QSprite.Layout
Copyright (c) Alex Movsisyan

****************************************************************************

Layout Structure

<body class="content l3">
    <div id="wrapper">
        <div id="header">

        </div> <!-- #header -->
        <div id="col1">

        </div> <!-- #col1 -->
        <div id="col2">

        </div> <!-- #col2 -->
        <div id="col3">

        </div> <!-- #col3 -->
        <div id="footer">

        </div> <!-- #footer -->
    </div>
</body>

****************************************************************************/
        
#wrapper {
    position:relative;
    width: 1024px;
    text-align:left;
    margin:0 auto;
}

#header {
    clear: both;
    width: 100%;
    float: left;
    position: relative;
}

#col1, #col2, #col3 {
    position: relative;
    float: left;
    padding: 0 0 1em;
    overflow: hidden;
    vertical-align: top;
}

* html #col1, * html #col2, * html #col3 {
    display:inline;
}

#footer {
    clear: both;
    width: 100%;
    float: left;
    position: relative;
}

/* Layout: 1 column
---------------------------------------------------------------------------*/

.one-col #col1 {
    width: 100%;
}

.one-col #col2 {
    display: none;
    visibility: hidden;
}

.one-col #col3 {
    display: none;
    visibility: hidden;
}

/* Layout: 2 column
---------------------------------------------------------------------------*/

.two-col #col1 {
    width: 22%;
}

.two-col #col2 {
    width: auto;
    min-width: 78%;
}

.two-col #col3 {
    display: none;
    visibility: hidden;
}

/* Layout: 3 column
---------------------------------------------------------------------------*/

.three-col #col1 {
    width: 22%;
}

.three-col #col2 {
    width: 56%;
}

.three-col #col3 {
    width: 22%;
}

/* Push footer to page bottom
---------------------------------------------------------------------------*/
.basement #footer, #push {
    height:4em;
}

/*
@media all and (min-width: 0px)
{
	body.l2 #col2
	{
		left:.5em;
	}
	
	body.equal #col1, body.equal #col2, body.equal #col3
	{
		padding-bottom:0!important;
		margin-bottom:0!important;
	}
	
	body.equal #col1[id^="col1"]:before, body.equal #col2[id^="col2"]:before, body.equal #col3[id^="col3"]:before
	{
		content:'Q';
		display:block;
		background:inherit;
		padding-top:32767px!important;
		margin-bottom:-32767px!important;
		height:0;
	}
}
*/

/* Test: Highlight columns
---------------------------------------------------------------------------*/
.test #header, #test #header {
    background: #bbb;
    border-bottom: 1px solid #000;
    min-height: 20px;
}

.test #col1, #test #col1 {
    background: #666;
    min-height: 100px;
}

.test #col2, #test #col2 {
    background: #ccc;
    min-height: 100px;
}

.test #col3, #test #col3 {
    background: #ddd;
    min-height: 100px;
}

.test #footer, #test #footer {
    background: #999;
    border-top: 1px solid #000;
    min-height: 20px;
}